<!doctype html>
<html>
<meta charset="UTF-8"/>
	<head>
		<title>上下晃动的箭头</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta content="email=no" name="format-detection" />
		<!--禁止Android中自动识别页面中的邮件地址-->

		<style class="cp-pen-styles">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
			}
			
			section {
				position: relative;
				width: 100%;
				height: 100%;
			}

			#section05 {
				background-color: skyblue;
			}
			
			
			.demo a {
				position: absolute;
				bottom: 20px;
				left: 50%;
				z-index: 2;
				display: inline-block;
				-webkit-transform: translate(0, -50%);
				transform: translate(0, -50%);
				color: #fff;
				font: normal 400 20px/1 'Josefin Sans', sans-serif;
				letter-spacing: .1em;
				text-decoration: none;
				transition: opacity .3s;
			}
			
			.demo a:hover {
				opacity: .5;
			}
			

			#section05 a {
				padding-top: 70px;
			}
			
			#section05 a span {
				position: absolute;
				top: 0;
				left: 50%;
				width: 24px;
				height: 24px;
				margin-left: -12px;
				border-left: 1px solid #fff;
				border-bottom: 1px solid #fff;
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				-webkit-animation: sdb05 1.5s infinite;
				animation: sdb05 1.5s infinite;
				box-sizing: border-box;
			}
			
			@-webkit-keyframes sdb05 {
				0% {
					-webkit-transform: rotate(-45deg) translate(0, 0);
					opacity: 0;
				}
				50% {
					opacity: 1;
				}
				100% {
					-webkit-transform: rotate(-45deg) translate(-20px, 20px);
					opacity: 0;
				}
			}
			
			@keyframes sdb05 {
				0% {
					transform: rotate(-45deg) translate(0, 0);
					opacity: 0;
				}
				50% {
					opacity: 1;
				}
				100% {
					transform: rotate(-45deg) translate(-20px, 20px);
					opacity: 0;
				}
			}
		</style>
	</head>

	<body>

		<section id="section05" class="demo">
			<a href="#section06"><span></span></a>
		</section>
	</body>

</html>